const className = 'bottom' // 默认

const isIE = navigator.userAgent.indexOf('MSIE') > -1

/**
 * showTooltip的函数
 * 该函数接受一个obj参数，表示要显示提示框的对象
 * 函数根据obj的className来判断提示框的显示位置，并设置提示框的left和top属性。
 * 如果提示框的宽度超过了浏览器窗口的宽度，那么将提示框的左侧设置为距离左侧菜单的距离。
 *
 * 如果鼠标在提示框内移动，那么提示框的display属性将被设置为block，使得提示框显示在鼠标下方。
 * @param obj
 * @param id
 * @param html
 * @param options
 */
function showTooltip(obj, id, html, options = {
  width: null,
  height: null
}) {
  if(document.getElementById(id) == null) {
    // tooltipBox参数，表示要显示的提示框元素
    let tooltipBox
    tooltipBox = document.createElement('div')
    let placement = obj.getAttribute('placement') || className
    tooltipBox.className = placement + '-tooltip'
    tooltipBox.id = id
    tooltipBox.innerHTML = html

    obj.appendChild(tooltipBox)

    tooltipBox.style.width = options.width ? options.width + 'px' : 'auto'
    tooltipBox.style.height = options.height ? options.height + 'px' : 'auto'

    if(!options.width && isIE) {
      tooltipBox.style.width = tooltipBox.offsetWidth + 'px'
    }

    tooltipBox.style.position = 'absolute'
    tooltipBox.style.display = 'block'
    // 提示框出现的位置，可选值为top``top-start``top-end``bottom``bottom-start`
    // `bottom-end``left``left-start``left-end``right``right-start``right-end
    let left, top
    switch(placement) {
      case 'top':
        break
      case 'top-start':
        break
      case 'bottom':
        top = obj.offsetTop + obj.offsetHeight + 8
        left = obj.offsetLeft + (obj.offsetWidth - tooltipBox.offsetWidth) / 2
        break
      case 'right':
        top = obj.offsetTop + (obj.offsetHeight - tooltipBox.offsetHeight) / 2
        // top = (tooltipBox.offsetHeight - obj.offsetHeight) / 2
        left = obj.parentNode.offsetWidth + 7
        break
      default:
        break
    }
    // bottom left效果------
    // let left = obj.offsetLeft
    // const top = obj.offsetTop + obj.offsetHeight + 8

    // bottom center效果------
    // let left = obj.offsetLeft + (obj.offsetWidth - tooltipBox.offsetWidth) / 2
    // const top = obj.offsetHeight
    // let left = 0
    if(left + tooltipBox.offsetWidth > document.body.clientWidth) {
      const demoLeft = document.getElementsByClassName('hy-menu')[0].offsetLeft
      left = document.body.clientWidth - tooltipBox.offsetWidth - demoLeft
      if(left < 0) left = 0
    }

    tooltipBox.style.left = left + 'px'
    tooltipBox.style.top = top + 'px'

    obj.onmouseleave = function() {
      //当鼠标离开obj时，会触发onmouseleave事件，该事件会设置提示框的display属性为none，使得提示框在100毫秒后消失。
      setTimeout(function() {
        document.getElementById(id).style.display = 'none'
      }, 100)
    }

  } else {
    document.getElementById(id).style.display = 'block'
  }
}

//查询到所有含有 tooltip属性的 dom节点,  鼠标放上去时显示 提示
// const nodeList = document.querySelectorAll('span[tooltip]')
// console.log(nodeList, 'node')
// for(let i of nodeList) {
//   i.addEventListener('mouseenter', () => {
//     showTooltip(i, i.getAttribute('id') + 'tooltip', i.getAttribute('tooltip'))
//   })
// }

